<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="https://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>vue路由跳转后页面不刷新的解决方案 &middot; 我的博客</title>
  <meta name="description" content="" />

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-08 ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       刘川的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>vue路由跳转后页面不刷新的解决方案</h1>
  <time datetime=0001-01-01T00:00:00Z class="post-date">Mon, Jan 1, 0001</time>
  <h2 id="在vue项目中使用thisrouterpush跳转到当前页面携带的参数不一样路由发生了变化但页面数据并没有刷新">在vue项目中使用this.$router.push()跳转到当前页面,携带的参数不一样，路由发生了变化，但页面数据并没有刷新</h2>
<hr>
<h4 id="1thisroutergo0这种方法虽然代码很少只有一行但是体验很差页面会一瞬间的白屏体验不是很好">1.this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好</h4>
<h4 id="2locationreload这种也是一样画面一闪体验不是很好">2.location.reload()。这种也是一样，画面一闪，体验不是很好</h4>
<hr>
<h4 id="只需在appvue的router-viewrouter-view中添加keyroutefullpath">只需在APP.vue的<!-- raw HTML omitted --><!-- raw HTML omitted -->中添加:key=&quot;$route.fullPath&rdquo;</h4>
<p><img src="http://q79ifqd1q.bkt.clouddn.com/Annotation%202020-04-07%20153841.png" alt="图片说明"></p>
<h4 id="就可以解决">就可以解决</h4>
<hr>
<h5 id="代码">代码</h5>
<pre><code>&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;router-view v-if=&quot;isRouterAlive&quot; :key=&quot;$route.fullPath&quot;&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
</div>


    </main>

    
      
    
  </body>
</html>
